<template>
  <div class="page-container serve-tool-detail">
    <div class="f-r a-c j-b" style="width: 100%;margin-bottom: 20px">
      <Breadcrumb />
      <el-button @click="back"><i class="el-icon-arrow-left" />返回</el-button>
    </div>
    <div v-if="isAudit" class="step">
      <el-steps :active="1" align-center>
        <el-step v-for="(node,index) in nodeList" :key="node.id" :title="`${index + 1}、${node.name}`">
          <template slot="icon">
            <div class="step02" :style="{backgroundImage: `url(${node.icon})`}" />
          </template>
        </el-step>
      </el-steps>
    </div>
    <el-card shadow="none" style="margin: 20px 0">
      <h2>基本信息</h2>
      <div class="ctable-box">
        <table>
          <tr>
            <td class="tool_baco" colspan="1">应用名称</td>
            <td colspan="3" class="table_td">
              {{ detail.name }}
            </td>
          </tr>
          <tr>
            <td class="tool_baco">服务厂商</td>
            <td class="table_td" width="400"> {{ detail.serviceProviderName }}</td>
            <td class="tool_baco">提供部门</td>
            <td class="table_td" width="400"> {{ detail.createDeptName }}</td>
          </tr>
          <tr>
            <td class="tool_baco" colspan="1">工具介绍</td>
            <td colspan="3" class="table_td"> {{ detail.itselfDesc }}</td>
          </tr>
          <tr>
            <td class="tool_baco" colspan="1">功能描述</td>
            <td colspan="3" class="table_td">
              {{ detail.functionDesc }}
            </td>
          </tr>
          <tr>
            <td class="tool_baco" colspan="1">业务场景</td>
            <td colspan="3" class="table_td">
              {{ detail.businessDesc }}
            </td>

          </tr>
        </table>
        <table style="margin-top: 60px">
          <tr>
            <td class="tool_baco" colspan="1" style="padding-left: 85px;text-align: left">附件类型</td>
            <td colspan="1" class="tool_baco" style="padding-left: 85px;text-align: left">
              附件名称
            </td>
          </tr>
          <tr v-for="(item,index) in detail.files" :key="index">
            <td class="table_td" style="padding-left: 85px;text-align: left">{{ item.name }}</td>
            <td class="table_td" style="padding-left: 85px;text-align: left">
              <el-link>
                <a :href="item.path" />
              </el-link>
            </td>
          </tr>
        </table>
      </div>
    </el-card>
    <el-card v-if="isSub" shadow="none" style="margin: 20px 0">
      <h2>订阅申请信息</h2>
      <div class="ctable-box">
        <table>
          <tr>
            <td class="tool_baco" colspan="1">申请人</td>
            <td colspan="1" class="table_td">
              {{ subDetail.createName }}
            </td>
            <td class="tool_baco" colspan="1">申请部门</td>
            <td colspan="1" class="table_td">
              {{ subDetail.createDeptName }}
            </td>
          </tr>
          <tr>
            <td class="tool_baco">联系人姓名</td>
            <td class="table_td" width="400"> {{ subDetail.applyInfo.contactsName }}</td>
            <td class="tool_baco">技术人员姓名</td>
            <td class="table_td" width="400"> {{ subDetail.applyInfo.technicianName }}</td>
          </tr>
          <tr>
            <td class="tool_baco" colspan="1">联系人办公电话</td>
            <td colspan="1" class="table_td"> {{ subDetail.applyInfo.contactsTel }}</td>
            <td class="tool_baco" colspan="1">技术人员办公电话</td>
            <td colspan="1" class="table_td"> {{ subDetail.applyInfo.technicianTel }}</td>
          </tr>
          <tr>
            <td class="tool_baco" colspan="1">联系人手机号码</td>
            <td colspan="1" class="table_td"> {{ subDetail.applyInfo.contactsMobile }}</td>
            <td class="tool_baco" colspan="1">技术人员手机号码</td>
            <td colspan="1" class="table_td"> {{ subDetail.applyInfo.technicianMobile }}</td>
          </tr>
          <tr>
            <td class="tool_baco" colspan="1">单位地址</td>
            <td colspan="3" class="table_td"> {{ subDetail.applyInfo.address }}</td>
          </tr>
          <tr>
            <td class="tool_baco" colspan="1">申请原因</td>
            <td colspan="3" class="table_td"> {{ subDetail.applyInfo.reason }}</td>
          </tr></table>
      </div>
    </el-card>
    <el-card v-if="isAudit" shadow="none">
      <h2>处理流程</h2>
      <el-table border :data="tableData">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { http_serve_audit_process, http_serve_publish_app, http_serve_sub_app } from '@/api'
import Breadcrumb from '@/components/Breadcrumb'
export default {
  name: 'Detail',
  components: { Breadcrumb },
  data() {
    return {
      stepIcon: {
        'step1': require('@/assets/serve-tool/step1.png'),
        'step1_active': require('@/assets/serve-tool/step1_active.png'),

        'step2': require('@/assets/serve-tool/step2.png'),
        'step2_active': require('@/assets/serve-tool/step2_active.png'),

        'step3': require('@/assets/serve-tool/step3.png'),
        'step3_active': require('@/assets/serve-tool/step3_active.png'),

        'step4': require('@/assets/serve-tool/step4.png'),
        'step4_active': require('@/assets/serve-tool/step4_active.png')
      },
      nodeList: [],
      detail: {},
      subDetail: {
        applyInfo: {}
      }, // 订阅详情
      tableData: [],
      columns: [
        { prop: 'createName', label: '处理人' },
        { prop: 'createDeptName', label: '处理部门' },
        { prop: 'auditNodeName', label: '处理节点名称' },
        { prop: 'updateTime', label: '操作时间' }
      ],
      isAudit: false, // 是否审核
      isSub: false // 是否订阅
    }
  },
  created() {
    console.log('this.$route.params', this.$route.params)
    const { id, auditId, type } = this.$route.params
    http_serve_publish_app.read({ id }).then(res => {
      const data = res || {}
      if (!data.files) {
        data.files = []
      }
      this.detail = data
    })
    // 订阅详情
    if (type === 'sub') {
      this.isSub = true
      http_serve_sub_app.read({ subId: id }).then(res => {
        if (!res.applyInfo) {
          res.applyInfo = {}
        }
        this.subDetail = res
        console.log(this.subDetail)
      })
    }
    // 审核详情
    if (auditId) {
      this.isAudit = true
      // 审核相关
      http_serve_audit_process.nodeList({
        id: auditId
      }).then(res => {
        this.nodeList = res
      })
      http_serve_audit_process.list({ id: auditId }).then(res => {
        this.tableData = res
      })
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
.serve-tool-detail{
  width: 1400px;
  margin: 0 auto;
  .ctable-box {
    table {
      width: 100%;
      border-spacing: 0px;
      border: 1px solid #E5E9F2;
      border-collapse: collapse;
    }
    tr {
      height: 60px;
      border: 1px solid #E5E9F2;
    }
    .tool_baco {
      background: #f9faff;
      width: 200px;
      color: #333333;
    }
    td {
      overflow: hidden;
      color: #333333;
      border: 1px solid #E5E9F2;
      line-height: 36px;
      font-size: 18px;
      padding-left: 45px;
      text-align: left
    }
    .table_td {
      padding-left: 10px;
      color: #333333;
    }
  }

  .step {
    height: 200px;
    padding-top: 80px;
    background: #ffffff;
    .detail {

    }
    .step02 {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background-size: 100% 100%;
    }
  }
  .step {
    .el-steps{
      width: 100%;
      .el-step__icon.is-text {
        width: 100%;
        border: none;
      }
      .el-step__title {
        height: 16px;
        line-height: 16px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 700;
        color: #333333;
      }
      .el-step__line {
        background-color: transparent;
        border-top: 3px dashed;
      }
    }
  }
}
</style>
